<template>
  <el-transition>
    <div class="index">
      <el-card v-loading="loadingTop" class="box-card index-top">
        <div class="top-title">
          <span>数据概览</span>
        </div>
        <div class="top-quick">
          <div class="quick-class-num common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two">{{ source.numberOfClasses }}</span>
                </div>
                <div>
                  <span class="count-one">班级总数</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <i class="iconfont icon-banji"></i>
              </div>
            </div>
          </div>
          <div class="quick-teacher-num common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two">{{ source.numberOfTeachers }}</span>
                </div>
                <div>
                  <span class="count-one">教师总数</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <i class="iconfont icon-jiaoshi"></i>
              </div>
            </div>
          </div>
          <div class="quick-student-num common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two">{{ source.numberOfStudents }}</span>
                </div>
                <div>
                  <span class="count-one">学生总数</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <i class="iconfont icon-xuesheng"></i>
              </div>
            </div>
          </div>
          <div class="quick-run-time common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two"
                    >{{ source.averageExerciseDuration }}h</span
                  >
                  <span class="count-three" v-if="false">h</span>
                </div>
                <div>
                  <span class="count-one">人均运动时长</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <i class="iconfont icon-gerencanshu"></i>
              </div>
            </div>
          </div>
          <div class="quick-num common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two">{{ source.sportsPersonTimes }}</span>
                </div>
                <div>
                  <span class="count-one">训练总人数</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <i class="iconfont icon-duoren"></i>
              </div>
            </div>
          </div>
          <div class="quick-count-time common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two">{{ source.hours }}h</span>
                  <span class="count-three" v-if="false">h</span>
                </div>
                <div>
                  <span class="count-one">训练总时长</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <i class="iconfont icon-zonghaoshishichang"></i>
              </div>
            </div>
          </div>
          <div class="quick-number-courses common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two">{{ courses }}</span>
                  <span class="count-three" v-if="false">h</span>
                </div>
                <div>
                  <span class="count-one">课程数</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <img
                  width="100%;height:100%"
                  src="../../assets/index_images/course.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="quick-number-participants common">
            <div class="common-children">
              <div class="count">
                <div>
                  <span class="count-two">{{ participants }}</span>
                  <span class="count-three" v-if="false">h</span>
                </div>
                <div>
                  <span class="count-one">参加人数</span>
                </div>
              </div>
            </div>
            <div class="common-children">
              <div class="icon">
                <img
                  width="100%;height:100%"
                  src="../../assets/index_images/people.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <div class="index-main">
        <div class="box-card main-left">
          <el-card class="main-lefts">
            <div class="left-top">
              <span>快捷入口</span>
            </div>
            <div class="left-main">
              <div
                v-if="this.$store.state.user.USER_INFO.roleId == 2"
                @click="to('/sports/Aplan')"
                class="main-item"
              >
                <div class="item-common homework">
                  <i class="iconfont icon-zuoye"></i>
                </div>
                <div class="text">布置作业</div>
              </div>
              <div
                v-if="this.$store.state.user.USER_INFO.roleId == 2"
                @click="to('/sports/examine')"
                class="main-item"
              >
                <div class="item-common jianchaHomework">
                  <i class="iconfont icon-shu"></i>
                </div>
                <div class="text">检查作业</div>
              </div>

              <!-- <div
            @click="to('/sportsConsulting/information')" class="main-item">
            <div class="item-common yundong">
              <i class="iconfont icon-book-full"></i>
            </div>
            <div class="text">体育资讯&知识</div>
          </div> -->
              <div
                v-if="this.$store.state.user.USER_INFO.roleId == 1"
                @click="to('/school/teacher')"
                class="main-item"
              >
                <div class="item-common teacher">
                  <i class="iconfont icon-jiaoshi"></i>
                </div>
                <div class="text">教师管理</div>
              </div>
              <div
                v-if="this.$store.state.user.USER_INFO.roleId == 1"
                @click="to('/school/class')"
                class="main-item"
              >
                <div class="item-common class">
                  <i class="iconfont icon-users"></i>
                </div>
                <div class="text">班级管理</div>
              </div>
              <div
                v-if="this.$store.state.user.USER_INFO.roleId == 1"
                @click="to('/school/student')"
                class="main-item"
              >
                <div class="item-common student">
                  <i class="iconfont icon-w_xuesheng-"></i>
                </div>
                <div class="text">学生管理</div>
              </div>
              <div @click="other" class="main-item">
                <div class="item-common qita">
                  <i class="iconfont icon-fenleiorguangchangorqita"> </i>
                </div>
                <div class="text">其他</div>
              </div>
            </div>
          </el-card>
          <el-card style="margin-top: 1%" class="main-lefts">
            <div style="font-size: 20px">
              <span>体测数据概览</span>
            </div>
            <div
              ref="monthWorkOrdersss"
              class="echarts-box"
              style="width: 100%; height: 290%"
            ></div>
          </el-card>
        </div>
        <el-card
          v-loading="loadingCenter && loadingChart"
          class="box-card main-right"
        >
          <div class="right-top">
            <span>学校体育作业周情况总览</span>
          </div>
          <el-card class="box-card right-source">
            <div class="source-main">
              <div class="source-common">
                <div class="color-green">
                  {{ taskStatistics.totalPersonTimes }}
                </div>
                <div>训练总人数</div>
              </div>
              <div class="source-common">
                <div class="color-red">
                  {{ taskStatistics.personTimesCompleted }}
                </div>
                <div>作业完成人次</div>
              </div>
              <div class="source-common">
                <div class="color-black">
                  {{ taskStatistics.completionRate }}%
                </div>
                <div>周作业完成率</div>
              </div>
            </div>
          </el-card>
          <div
            ref="monthWorkOrderss"
            class="echarts-box"
            style="width: 100%; height: 340px; margin-top: 40px"
          ></div>
        </el-card>
      </div>
      <div
        v-show="$store.state.user.USER_INFO.roleId == 2"
        class="index-bottom"
        style="min-height: 300px"
      >
        <el-card v-loading="loadingBottom" class="box-card bottom-left">
          <div style="width: 100%; height: 100%">
            <div class="left-top" style="height: 20%">
              <span style="font-size: 20px">学生运动反馈</span>
            </div>
            <div
              ref="monthWorkOrderssIng"
              class="echarts-boxs"
              style="width: 100%; height: 80%"
            ></div>
          </div>
        </el-card>
        <el-card v-loading="loadingBottom" class="box-card bottom-right">
          <div style="display: flex">
            <div class="bottom-right-image" style="margin-left: 5%">
              <img src="../../assets/login_images/teacher.png" alt="" />
            </div>
            <div class="bottom-right-tips">
              <div class="tips-main">
                <div style="display: flex">
                  <div style="padding-top: 10px">
                    <i
                      style="font-size: 24px; color: #ff7d5a; margin-left: 30px"
                      class="iconfont icon-dianzan_kuai"
                    ></i>
                  </div>
                  <div style="flex: 1; padding: 10px 20px; line-height: 30px">
                    “<span style="color: #6e99e4">{{ list.aitop }}</span
                    ><span>{{ list.aibody }}</span
                    >”
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </el-transition>
</template>

<script>
import * as echarts from "echarts";
import theme from "@/utils/customed.json";
import {
  indexSource,
  indextTaskStatistics,
  indexWorkbench,
  workFeedback,
  selectCourse,
} from "@/api/index";
import moment from "moment";

export default {
  computed: {},
  data() {
    return {
      list: {
        aitop: null,
        aibody: null,
      },
      source: {
        numberOfClasses: "",
        numberOfTeachers: "",
        numberOfStudents: "",
        averageExerciseDuration: "",
        sportsPersonTimes: "",
        hours: "",
      },
      courses: "",
      participants: "",
      loadingBottom: false,
      loadingTop: false,
      loadingCenter: false,
      loadingChart: false,
      taskStatistics: {
        totalPersonTimes: "",
        personTimesCompleted: "",
        completionRate: "",
      },
      echartsSourceX: null,
      echartsSourceY: null,
      arr:[]
    };
  },
  created() {
    this.getSource();
    this.getSelectCourse();
    this.workFeedback();
  },
  methods: {
    getSelectCourse() {
      let data = {
        teacherId: this.$store.state.user.USER_INFO.id,
      };
      selectCourse(data).then((res) => {
        if (res.code == 200) {
          this.courses = res.result.sportCount;
          this.participants = res.result.stuCount;
          // this.arr= [ this.courses, this.participants]
          this.arr= [115,150]
             this.initMonthWorkOrdersss();
        }
      });
    },
    other() {
      this.$alert("此功能正在开发中...", "提示", {
        confirmButtonText: "关闭",
      });
    },
    workFeedback() {
      let data = {
        schId: this.$store.state.user.USER_INFO.pscShId,
        userId: this.$store.state.user.USER_INFO.userId,
      };
      this.loadingBottom = true;
      workFeedback(data).then((res) => {
        if (res.code == 200) {
          this.loadingBottom = false;
          this.list = res.result;
          this.initMonthWorkOrder();
        }
      });
    },
    initMonthWorkOrderss() {
      this.$nextTick(() => {
        echarts.registerTheme("theme", theme);
        let myChart = echarts.init(this.$refs.monthWorkOrderss, "theme");
        let options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },

          xAxis: [
            {
              type: "category",
              data: this.echartsSourceX,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "日完成率",
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: "{value} %",
              },
            },
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "日完成率",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value + "%";
                },
              },
              data: this.echartsSourceY,
              // data: [10,20,30,20,100,20,40],
              barWidth: 5,
              itemStyle: {
                //下面是拐点样式配置属性
                color: "#75B1FF", //这里设置的拐点颜色
                borderColor: "#75B1FF", //  拐点边框颜色
                borderWidth: 10, //  拐点边框宽度
                shadowColor: "#75B1FF", //  阴影颜色
                shadowBlur: 20, //  阴影渐变范围控制
              },
            },

            {
              name: "日完成率",
              type: "line",
              tooltip: {
                valueFormatter: function (value) {
                  return value + "%";
                },
              },
              itemStyle: {
                //下面是拐点样式配置属性
                color: "#FF721C", //这里设置的拐点颜色
                borderColor: "#FF721C", //  拐点边框颜色
                borderWidth: 10, //  拐点边框宽度
                shadowColor: "#FF721C", //  阴影颜色
                shadowBlur: 20, //  阴影渐变范围控制
              },
              symbolSize: 10, //拐点大
              data: this.echartsSourceY,
              // data: [10,20,30,20,100,20,40],
            },
          ],
        };
        window.addEventListener("resize", () => {
          myChart.resize();
        });
        myChart.setOption(options);
      });
    },
    initMonthWorkOrdersss() {
      this.$nextTick(() => {
        echarts.registerTheme("theme", theme);
        let myChart = echarts.init(this.$refs.monthWorkOrdersss, "theme");
        let options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },

          xAxis: [
            {
              type: "category",
              data: ["课程数", "参加人数"],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              type: "line",
              smooth: true, // 设置为true表示启用平滑曲线
              tooltip: {
                valueFormatter: function (value) {
                  return value + "%";
                },
              },
              itemStyle: {
                color: "#0084FF",
                borderColor: "#75B1FF",
                borderWidth: 0,
                shadowColor: "#75B1FF",
                shadowBlur: 20,
              },
              symbol: "circle",
              symbolSize: 10,
              data: this.arr,
            },
          
          ],
        };
        window.addEventListener("resize", () => {
          myChart.resize();
        });
        myChart.setOption(options);
      });
    },
    initMonthWorkOrder() {
      this.$nextTick(() => {
        echarts.registerTheme("theme", theme);
        let myChart = echarts.init(this.$refs.monthWorkOrderssIng, "theme");
        let options = {
          //数据的颜色设置
          color: ["#f57252", "#886bff", "#3178f6"],
          //鼠标移入显示的文字
          tooltip: {
            trigger: "item",
            formatter: "{b}   {d}%",
          },
          //图例设置
          legend: {
            orient: "vertical", //竖直展示，如果横着的话，这个可以直接去掉
            left: "10%",
            top: "center",
            align: "left",
            itemGap: 20, //数据上下的距离
            icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
            itemWidth: 10, // 设置宽度
            data: [
              {
                value: this.list.relaxed,
                name: "好轻松",
                label: { color: "#ffffff" },
              },
              {
                value: this.list.difficulty,
                name: "很吃力",
                label: { color: "#ffffff" },
              },
              {
                value: this.list.okay,
                name: "还可以",
                label: { color: "#ffffff" },
              },
            ],
            selectedMode: false,
          },
          series: [
            {
              radius: ["50%", "80%"], //第一个是中间圆的大小，第二个是外边圆的大小
              center: ["40%", "50%"], //左边的距离，上边的距离
              type: "pie",
              left: "40%",
              label: {
                normal: {
                  formatter: function (data) {
                    //.toFixed(0)去掉小数位，如果为2就是保留两位小数
                    let b = data.percent.toFixed(0);
                    if (b <= 0) {
                      return "";
                    } else {
                      return b + "%";
                    }
                  },
                  // formatter: "{d}" + "%", //直接百分比，没有去掉小数位，上边是去掉小数位的
                  //formatter: "{b}：{c}人"  //正常兼职：456
                  position: "inner", //文字显示在内部，如果在外边把这个去掉就好
                  color: "#fff", //文字的颜色
                },
              },
              data: [
                {
                  value: this.list.relaxed,
                  name: "好轻松",
                  label: { color: "#ffffff" },
                },
                {
                  value: this.list.difficulty,
                  name: "很吃力",
                  label: { color: "#ffffff" },
                },
                {
                  value: this.list.okay,
                  name: "还可以",
                  label: { color: "#ffffff" },
                },
              ],
            },
          ],
        };
        window.addEventListener("resize", () => {
          myChart.resize();
        });
        myChart.setOption(options);
      });
    },
    to(url) {
      this.$router.push(url);
    },
    getSource() {
      this.loadingTop = true;
      this.loadingCenter = true;
      this.loadingChart = true;
      indexSource({
        userId: this.$store.state.user.USER_INFO.id,
        schoolId: this.$store.state.user.USER_INFO.pscShId,
      }).then((response) => {
        if (response.code === 200) {
          this.loadingTop = false;
          this.source = response.result;
        }
      });
      indextTaskStatistics({
        userId: this.$store.state.user.USER_INFO.id,
        schoolId: this.$store.state.user.USER_INFO.pscShId,
      }).then((response) => {
        if (response.code === 200) {
          this.loadingCenter = false;
          this.taskStatistics = response.result;
        }
      });
      indexWorkbench({
        userId: this.$store.state.user.USER_INFO.id,
        schoolId: this.$store.state.user.USER_INFO.pscShId,
      }).then((response) => {
        if (response.code === 200) {
          this.loadingChart = false;
          this.echartsSourceX = response.result.map((item) => item.pjtime);
          this.echartsSourceY = response.result.map((item) => item.percentage);
          this.initMonthWorkOrderss();
       
        }
      });
    },
  },
};
</script>

<style lang="scss">
.index-bottom {
  .bottom-left {
    .el-card__body {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
.index {
  ::v-deep .index-top {
    padding: 8px;
    box-sizing: border-box;
    .top-title {
      span {
        font-size: 20px;
      }
    }
    .top-quick {
      display: flex;
      margin-top: 15px;
      .common {
        color: #ffffff;
        height: 100px;
        flex: 1;
        display: flex;
        margin-right: 5px;
        box-sizing: border-box;
        border-radius: 8px;
        opacity: 1;
        .common-children {
          flex: 1;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .icon {
            width: 45px;
            height: 45px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              margin: 0;
              &:before {
                font-size: 50px;
                opacity: 0.5;
              }
            }
          }
          .count {
            flex: 1;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            padding-left: 20px;
            span {
              margin: 0 auto;
              padding: 0;
              margin: auto;
              &.count-one {
                font-size: 15px;
                white-space: nowrap;
              }
              &.count-two {
                font-size: 32px;
                float: left;
              }
            }
          }
        }
      }
      .quick-class-num {
        background: linear-gradient(270deg, #feac7e 0%, #fe8b86 100%);
      }
      .quick-teacher-num {
        background: linear-gradient(270deg, #49c2fd 0%, #3886f6 100%);
      }
      .quick-student-num {
        background: linear-gradient(270deg, #a97eff 0%, #8c6dfe 100%);
      }
      .quick-num {
        background: linear-gradient(270deg, #7dd57d 0%, #4bbb6d 100%);
      }
      .quick-run-time {
        background: linear-gradient(270deg, #fe8f88 0%, #f67585 100%);
      }
      .quick-count-time {
        background: linear-gradient(270deg, #f3a576 0%, #ec8443 100%);
      }
      .quick-number-courses {
        background: linear-gradient(270deg, #72e6e4 0%, #1ad1c2 100%);
      }
      .quick-number-participants {
        background: linear-gradient(270deg, #85a0fe 0%, #748ff6 100%);
      }
    }
  }
  ::v-deep .index-main {
    margin-top: 1%;
    min-height: 65vh;
    display: flex;
    .main-left {
      width: 38%;
      .main-lefts {
        height: 49.5%;
      }
      .left-top {
        font-size: 20px;
      }
      .left-main {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        .main-item {
          width: 80px;
          margin-left: 40px;
          margin-bottom: 14px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .item-common {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              margin: 0;
              &::before {
                color: #ffffff;
                font-size: 40px;
                opacity: 0.7;
              }
            }
          }
          .homework {
            //background: #ff6a62;
            background: linear-gradient(360deg, #ff6a63 0%, #ff9165 100%);
            box-shadow: 0px 10px 30px -10px #ff6a62;
          }
          .jianchaHomework {
            background: linear-gradient(360deg, #7a6df0 0%, #9e94f9 100%);
            box-shadow: 0px 10px 30px -10px #7d71f1;
          }
          .tiyu {
            background: linear-gradient(360deg, #388bee 0%, #74d1f8 100%);
            box-shadow: 0px 10px 30px -10px #388bee;
          }
          .yundong {
            background: linear-gradient(360deg, #73e5a0 0%, #4dcd7f 100%);
            box-shadow: 0px 10px 30px -10px #73e5a0;
          }
          .qita {
            background: linear-gradient(360deg, #fe9088 0%, #f67385 100%);
            box-shadow: 0px 10px 30px -10px #fe9088;
          }
          .teacher {
            background: linear-gradient(360deg, #51cde9 0%, #8ae2f6 100%);
            box-shadow: 0px 10px 30px -10px #51cde9;
            .iconfont {
              &::before {
                font-size: 60px;
              }
            }
          }
          .class {
            background: linear-gradient(360deg, #fa8e2d 0%, #feb06a 100%);
            box-shadow: 0px 10px 30px -10px #fa8e2d;
          }
          .student {
            background: linear-gradient(360deg, #5762e6 0%, #7894f7 100%);
            box-shadow: 0px 10px 30px -10px #5762e6;
            .iconfont {
              &::before {
                font-size: 70px;
                margin-left: 10px;
              }
            }
          }

          .text {
            margin-top: 15px;
            text-align: center;
          }
        }
      }
    }
    .main-right {
      margin-left: 1%;
      padding: 8px;
      width: 61%;
      .right-top {
        font-size: 20px;
      }
      .right-source {
        margin-top: 20px;
        height: 120px;
        .source-main {
          display: flex;
          height: 80px;
          .source-common {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            border-right: 1px solid #e9e9e9;
            &:last-child {
              border: none;
            }
            div {
              &:first-child {
                font-size: 36px;
              }
              &:last-child {
                font-size: 18px;
                margin-top: 12px;
              }
              &.color-green {
                color: #1cb792;
              }
              &.color-red {
                color: #ff464f;
              }
              &.color-black {
                color: #333333;
              }
            }
          }
        }
      }
    }
  }
  ::v-deep .index-bottom {
    margin-top: 1%;
    display: flex;

    .bottom-left {
      padding: 8px;
      width: 38%;
    }
    .bottom-right {
      margin-left: 1%;
      padding: 8px;
      width: 61%;
      .bottom-right-image {
        position: relative;
        &::after {
          content: "";
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0;
          height: 0;
          border-width: 17px;
          border-radius: 10px;
          border-color: transparent #e9e9eb transparent transparent;
          border-style: solid;
          position: absolute;
          right: -33px;
          top: 37%;
        }
      }
      .bottom-right-tips {
        display: flex;
        align-items: center;

        .tips-main {
          background: #e9e9eb;
          //border: 2px dotted #4b9bff;
          border-radius: 16px;
          padding: 0 2 0px;
          color: #000000;
        }
        height: auto;
        margin-left: 30px;
      }
    }
  }
}
</style>
